<template>
  <view>
    <view class="user-info-content">
      <view class="user-info-title" @click="gotoclick('basicInfo')">
        <view class="user-info">
          <view class="header">
            <!-- <u-icon
            name="touxiang"
            custom-prefix="custom-icon"
            color="#c0ddff"
            :size="100"
          ></u-icon> -->
            <u-avatar
              v-if="userInfo.profilePhoto"
              :size="100"
              :src="imageUrlPrefix + userInfo.profilePhoto"
            ></u-avatar>
            <view v-else class="white-text">
              <u-avatar
                :size="100"
                bg-color="#c0ddff"
                :text="getNameShort(userInfo?.name, 'last')"
              ></u-avatar>
            </view>
          </view>
          <view class="name-phone">
            <view class="name">{{ userInfo.name }}</view>
            <view>{{ userInfo.mobile }}</view>
          </view>
        </view>
        <view>
          <u-tag
            v-if="userInfo.realnameStatus !== 1"
            text="未实名"
            bg-color="#fff"
            color="#0177fd"
            type="success"
            shape="circle"
          />
          <u-tag
            v-if="userInfo.realnameStatus === 1"
            text="已实名"
            type="success"
            shape="circle"
            mode="dark"
          />
        </view>
      </view>
    </view>

    <view
      class="cell-content"
      style="
        overflow: hidden;
        position: relative;
        top: -210rpx;
        z-index: 10;
        padding: 0 16rpx;
        border-radius: 32rpx;
        overflow: hidden;
      "
    >
      <u-card
        :show-head="false"
        :show-foot="false"
        :body-style="{ padding: 0 }"
      >
        <view slot="body">
          <u-cell-group>
            <u-cell-item
              v-for="(item, index) in cellList.top"
              :key="index"
              :title="item.title"
              :title-style="{ marginLeft: '20rpx' }"
              @click="gotoclick(item.pathName)"
            >
              <u-icon
                slot="icon"
                size="48"
                custom-prefix="custom-icon"
                :color="item.color"
                :name="item.iconName"
              ></u-icon>
            </u-cell-item>
          </u-cell-group>
        </view>
      </u-card>
      <u-card
        v-if="userInfo.realnameStatus !== 1"
        :show-head="false"
        :show-foot="false"
        :body-style="{ padding: 0 }"
        style="margin-top: 32rpx"
      >
        <view slot="body">
          <view class="auth-user u-flex u-row-between" @click="toAuth">
            <view class="auth-user-left">
              <view class="auth-title">
                <text class="u-content-color">您还未进行</text>
                <text class="warning-text">实名认证</text>
              </view>
              <view>
                <text class="u-tips-color">实名认证后才能签署文件</text>
                <view class="auth-tag"
                  >去实名
                  <u-icon name="arrow-right" color="#fff" size="28"></u-icon
                ></view>
              </view>
            </view>
            <view class="auth-user-right">
              <img src="../../static/auth_tips.png" alt="" />
            </view>
          </view>
        </view>
      </u-card>
      <u-card
        :show-head="false"
        :show-foot="false"
        :body-style="{ padding: 0 }"
        style="margin-top: 32rpx"
      >
        <view slot="body">
          <u-cell-group>
            <u-cell-item
              v-for="(item, index) in bottomList"
              :key="index"
              :title="item.title"
              :title-style="{ marginLeft: '20rpx' }"
              @click="gotoclick(item.pathName)"
            >
              <u-icon
                slot="icon"
                size="48"
                custom-prefix="custom-icon"
                :color="item.color"
                :name="item.iconName"
              ></u-icon>
            </u-cell-item>
          </u-cell-group>
        </view>
      </u-card>
    </view>
  </view>

  <u-tabbar v-model="current" :list="tabbar" active-color="#2979ff"></u-tabbar>
</template>

<script lang="ts" setup>
import { tabbar } from '@/common/tabbar';
import { cellList } from './index';
import { useUserStore, useUserStoreWidthOut } from '@/stores/user';
import { getNameShort } from '@/utils/tools';
import { getAuthUrl } from '@/api/modules/auth';
import { onShow } from '@dcloudio/uni-app';
import { getUserInfoById } from '@/api/modules/user';
import { useBack } from '@/hooks/useBack';
import { getBaseUrl } from '@/utils/env';
const userStore = useUserStore();
const userInfo = ref<any>();
userInfo.value = userStore.getUserInfo;
const current = ref(3);
const imageUrlPrefix =
  getBaseUrl() + '/doc/Rest/doc/file/filePreview' + '?docId=';
const gotoclick = (name?: string) => {
  if (name) {
    (uni as any).$Router.push({
      name,
    });
  } else {
    uni.showToast({
      title: '开发中，敬请期待',
      icon: 'none',
      duration: 2000,
    });
  }
};
let bottomList = computed(() => {
  let _arr = [];
  if (userInfo.value.realnameStatus === 1) {
    _arr = [
      {
        title: '我的印章',
        color: '#15b6fe',
        iconName: 'yinzhang',
        pathName: 'mySeal',
      },
      ...cellList.bottom,
    ];
    return _arr;
  }
  return cellList.bottom;
});
const toAuth = () => {
  getAuthUrl({ redirectUrl: 'wechat://back' }).then((res: any) => {
    uni.navigateTo({
      url: '/pages/my/sign/webview/index?url=' + encodeURIComponent(res),
    });
  });
};

// useBack(() => getInfo());
onShow(() => {
  getInfo();
});
const getInfo = () => {
  const asyncUser = useUserStoreWidthOut();
  getUserInfoById({ userId: userInfo.value.userId }).then((res: any) => {
    userInfo.value.name = res.name;
    userInfo.value.realnameStatus = res.realnameStatus;
    userInfo.value.profilePhoto = res.profilePhoto;
    console.log(userInfo.value, 'getInfo');
    asyncUser.setUserInfo({
      ...userInfo.value,
    });
  });
};
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.title-tag {
  display: inline-block;
  background-color: #f66022;
  color: #fff;
  border-radius: 30rpx;
  padding: 5rpx 6rpx 6rpx 16rpx;
  margin-left: 10rpx;
}
.user-info-content {
  height: 360rpx;
  background: #0177fd;
  padding: 15rpx 46rpx 0;
  .user-info-title {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-info {
    display: flex;
    align-items: center;

    .header {
      background: #fff;
      border-radius: 50rpx;
      overflow: hidden;
      height: 100rpx;

      .white-text {
        .u-avatar {
          color: #fff !important;
          text {
            font-size: 50rpx !important;
            font-weight: bold;
          }
        }
      }
    }
    .name-phone {
      margin-left: 30rpx;
      color: #fff;
      .name {
        font-size: 48rpx;
        font-weight: bold;
      }
    }
  }
}
.auth-user {
  padding: 32rpx;
  padding-right: 20rpx;
  .auth-user-left {
    .auth-title {
      font-weight: bold;
      font-size: 32rpx;
      margin-bottom: 20rpx;
      .warning-text {
        color: #e46634;
      }
    }
    .auth-tag {
      display: inline-block;
      background-color: #f66022;
      color: #fff;
      border-radius: 30rpx;
      padding: 5rpx 6rpx 6rpx 16rpx;
      margin-left: 10rpx;
      // vertical-align: top;
    }
  }
  .auth-user-right {
    image {
      width: 130rpx;
      height: 105rpx;
    }
  }
}

::v-deep .u-card {
  margin-top: 0 !important;
}
</style>
